<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 1200px;
            margin: 100px auto;
            /* background-color: rgb(216, 216, 216);     */
            padding: 20px;
        }

        .box {
            width: 400px;
            height: 400px;
            background-color: rgb(201, 235, 121);
            padding: 40px;
            border: 20px solid red;
            margin: 50px;

        }

        body {
            height: 2500px;
        }

        .box-bz {
            box-sizing: content-box;
        }

        .box-ie {
            box-sizing: border-box
        }

        .text {
            border: 1px solid red;
            padding: 10px;
        }

        .pa {
            width: 200px;
            height: 200px;
            background-color: rgb(208, 243, 199);
            /* padding-top:10px ;
            padding-bottom: 20px;
            padding-left: 30px;
            padding-right: 40px; */
            /* padding 简写 */
            /* padding:10px 20px 30px 40px; 上右下左 */
            /* padding: 10px 20px 30px; 上(左右)下 */
            /* padding: 10px 20px; (上下)(左右) */
            /* padding:10px;(上下左右) */
            /* margin:10px 20px 30px 40px */
        }

        .bor {
            width: 200px;
            height: 200px;
            background-color: rgb(161, 198, 240);
            /* 设置所有方位的边框，用所有属性 */
            /* border:1px solid red; */
            /* 设置所有方位的边框，用单个属性 */
            /* border-width: 10px;
            border-style: solid;
            border-color: red; */
            /* 设置单个方位，用所有的属性 */
            /* border-right: 10px solid red; */
            /* 设置单个方位，用单个属性 */
            /* border-top-color: green;
            border-top-width: 20px;
            border-top-style: dotted; */

            border-width: 10px;
            border-color: hotpink;
            border-style: outset;
        }

        .ra {
            width: 200px;
            height: 200px;
            background-color: rgb(149, 196, 250);
            float: left;
            margin-right: 40px;
            margin-top: 100px;
        }

        .r1 {
            /* 给盒子的四个角统一设定圆角
            1.一个值，px、%、/
            */
            /* 把盒子变成一个标准的圆形或者椭圆形 */
            /* border-radius: 50%; */

            /* border-radius: 20px; */
            /* 上面和下面这两种方式等效 */
            /* border-radius: 20px/20px; */

            /* border-radius: 50px/100px; */
            /* 2.两个值  （左上、右下） （右上、左下）*/
            /* border-radius:50px 100px; */
            /* 3.三个值  左上 （右上、左下） 右下*/
            /* border-radius:10px 20px 30px; */
            /* 4.四个值  左上  右上 右下 左下*/
            /* border-radius: 10px 20px 30px 40px; */
            border-top-left-radius: 50px;

        }

        .r2 {
            border-top-right-radius: 50px 100px;
            /* border-top-right-radius: 20px 50px; */
            /* border-top-left-radius:50px ; */
        }

        .bor1 {
            /* width: 200px;
            height: 200px; */
            width: 0;
            /* background-color: rgb(204, 240, 187); */
            margin-top: 50px;
            /* border-top:100px solid red; */
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid yellowgreen;
        }
        .ra-con{
            height: 300px;
        }
        .pop {
            margin-top: 50px;
            width: 200px;
            height: 150px;
            background-color: rgb(187, 255, 181);
            border-radius: 15px;
            position: relative;
        }
        .pop::before{
            content: '';
            display: block;
            /* width: 10px;
            height: 10px; */
            width: 0;
            border:10px solid rgb(187, 255, 181);
            border-left-color: transparent;
            border-right-color:transparent ;
            border-top:none ;
            position: absolute;
            top:-10px;
            left:100px;
        }
        .sh{
            width: 200px;
            height: 200px;
            background-color: rgb(200, 219, 94);
            text-align: center;
            /* 阴影可以设置多个，用逗号分隔 */
            box-shadow:11px 12px 5px 6px #7a7a7a,
            -11px -12px 5px 6px #e23838;;
            
        }
        .sh span{
            
            font:bold 40px/200px '黑体';
            text-shadow: 2px 3px 4px blue,
            -2px -3px 4px rgb(241, 108, 46);
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 盒子模型
    大小=内容(content) + 内边距(padding) + 边框(border)
    标准盒子模型 width*height = 内容的大小，如果盒子的内边距或者边框变化，盒子的大小也会变化
    -->
        <div class="box bz">

        </div>
        <!-- ie盒子模型 width*height = 盒子的总的大小，如果盒子的内边距或者边框变化，盒子的大小不会变化，但是盒子的内容区域的大小会变化 -->
        <div class="box box-ie"></div>
        <!-- 280 + 80 + 40 = 400 -->
        <div class="text">
            `padding` 属性用于设置盒子内容与边框之间的间距，即内间距（填充）
        </div>
        <div class="pa">
            内容区域
        </div>
        <hr>
        <div class="bor">

        </div>
        <div class="bor1 b"></div>
        <div class="ra-con">
            <div class="ra r1 ">

            </div>
            <div class="ra r2 ">

            </div>
        </div>

        <div class="pop">
            pop
        </div>
        <h2>盒子阴影</h2>
        <div class="sh">
            <span>文字阴影</span>
        </div>
    </div>

</body>

</html>